<template>
	<div>
		<price-com :price="10">
			<template #next>
				<span >元</span>
			</template>
			<template #pre> 
				<span >￥</span>
			</template>
		</price-com>
		
		<price-com :price="200">
			<template  v-slot:next>
				<span >刀</span>
			</template>
			<template #pre> 
				<span >$</span>
			</template>
		</price-com>
		<component :is="cname"></component>
		<button @click="cname = 'ComA'">A</button>
		<button @click="cname = 'ComB'">B</button>
		<button @click="cname = 'ComC'">C</button>
		<hr>
		<keep-alive  :exclude="ex">
			<user-info v-if="isLog"></user-info>
			<log-info v-else></log-info>
			
		</keep-alive>
		<button @click="isLog = !isLog">切换</button>
		<hr >
		<button @click="add">{{num}}</button>
		
	</div>
</template>
<script>
	import PriceCom from '@/components/PriceCom.vue'
	import ComA from '@/components/ComA.vue'
	import ComB from '@/components/ComB.vue'
	// import ComC from '@/components/ComC.vue'
	import UserInfo from '@/components/UserInfo.vue'
	import LogInfo from '@/components/LogInfo.vue'
	import num from '@/mixin/num.js'
	export default{
		mixins:[num],
		data(){
			return {
				cname:'ComA',
				isLog:true,
				ex:["log-info"]
			}
		},
		// 异步加载组件，没有用到就不加载
		components:{
			UserInfo,LogInfo,
			PriceCom,ComA,ComB,ComC:()=>import('@/components/ComC.vue')}
	}
</script>